<template>
  <div class="fixed bottom-4 z-50" :style="{ right: props.showAIChat ? `${(props.aiPanelWidth || 400) + 20}px` : '16px' }">
    <!-- 代码补全按钮 -->
    <button
      v-if="showCompletionButton"
      @click="requestCompletion"
      :disabled="isLoading"
      class="w-10 h-10 bg-gradient-to-br from-[#50fa7b] to-[#8be9fd] hover:from-[#4ade80] hover:to-[#7dd3fc] rounded-lg shadow-lg transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
      title="AI代码补全"
    >
      <div class="w-full h-full flex items-center justify-center">
        <svg v-if="isLoading" class="w-5 h-5 text-white animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
        </svg>
        <svg v-else class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
        </svg>
      </div>
    </button>

    <!-- 代码补全建议弹窗 -->
    <div 
      v-if="showCompletion && completion"
      class="absolute bottom-12 right-0 w-80 bg-[#282a36] rounded-xl shadow-2xl border border-[#44475a] overflow-hidden"
    >
      <!-- 补全建议头部 -->
      <div class="flex items-center justify-between p-4 bg-[#21222c] border-b border-[#44475a]">
        <div class="flex items-center space-x-3">
          <div class="w-6 h-6 bg-gradient-to-br from-[#50fa7b] to-[#8be9fd] rounded-lg flex items-center justify-center">
            <svg class="w-4 h-4 text-[#282a36]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
            </svg>
          </div>
          <div>
            <span class="text-sm font-semibold text-[#f8f8f2]">AI代码建议</span>
            <p class="text-xs text-[#6272a4]">智能代码补全</p>
          </div>
        </div>
        <button 
          @click="closeCompletion"
          class="p-2 hover:bg-[#44475a] rounded-lg transition-colors group"
        >
          <svg class="w-4 h-4 text-[#6272a4] group-hover:text-[#f8f8f2] transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
          </svg>
        </button>
      </div>

      <!-- 补全建议内容 -->
      <div class="p-4">
        <div class="bg-[#21222c] rounded-lg p-4 mb-4 border border-[#44475a]">
          <pre class="text-sm text-[#f8f8f2] whitespace-pre-wrap font-mono leading-relaxed">{{ completion }}</pre>
        </div>
        
        <!-- 操作按钮 -->
        <div class="flex space-x-3">
          <button 
            @click="applyCompletion"
            class="flex-1 px-4 py-2.5 bg-gradient-to-r from-[#50fa7b] to-[#8be9fd] hover:from-[#4ade80] hover:to-[#7dd3fc] text-[#282a36] rounded-lg text-sm font-medium transition-all shadow-lg hover:shadow-xl transform hover:scale-[1.02]"
          >
            应用建议
          </button>
          <button 
            @click="closeCompletion"
            class="px-4 py-2.5 bg-[#44475a] hover:bg-[#555666] text-[#f8f8f2] rounded-lg text-sm font-medium transition-all"
          >
            取消
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { aiApi } from '@/api/ai'

interface Props {
  code: string
  language: string
  questionId: number
  hasSubmitted: boolean
  isContest: boolean
  showAIChat?: boolean
  aiPanelWidth?: number
  currentPosition: string
  isDisabled?: boolean
}

const props = defineProps<Props>()

const emit = defineEmits<{
  apply: [completion: string]
}>()

// 响应式数据
const isLoading = ref(false)
const showCompletion = ref(false)
const completion = ref('')

// 计算属性
const showCompletionButton = computed(() => {
  return props.hasSubmitted && !props.isContest && props.code.trim().length > 0 && !props.isDisabled
})

// 方法
const requestCompletion = async () => {
  if (!props.code.trim() || isLoading.value) return

  isLoading.value = true
  try {
    const response = await aiApi.codeCompletion({
      code: props.code,
      language: props.language,
      question_id: props.questionId,
      current_position: props.currentPosition
    })
    
    completion.value = response.data?.completion || ''
    showCompletion.value = true
  } catch (error: any) {
    console.error('代码补全失败:', error)
    // 这里可以显示错误提示
  } finally {
    isLoading.value = false
  }
}

const applyCompletion = () => {
  emit('apply', completion.value)
  closeCompletion()
}

const closeCompletion = () => {
  showCompletion.value = false
  completion.value = ''
}

// 监听代码变化，自动关闭补全建议
watch(() => props.code, () => {
  if (showCompletion.value) {
    closeCompletion()
  }
})
</script>
